<template>
<div>
  <MyNav>我的收藏</MyNav>
  <div class="collectList">
    <div class="collect" v-for="(item,index) in list" :key="index">
     <router-link :to="{path:'/detail',query:{categoryId:item.articleId}}">
       <div class="collectPic">
         <img :src=item.coverImgUrl alt="">
       </div>
       <div class="content">
         <p style="height: 40px">{{item.title}}</p>
         <p>{{item.articleSource}}</p>
       </div>
     </router-link>
    </div>
  </div>
<!--  <div>-->
<!--    {{this.$store.state.tocontent}}-->
<!--  </div>-->

</div>
</template>

<script>
import MyNav from "@/components/MyNav";
import {collectiontextlist} from "@/api/http";
export default {
name: "MyCollection",
  components:{
    MyNav
  },
  data(){
  return{
   list:[],
  }
  },
  created() {
    collectiontextlist().then(res=>{
      console.log(res)
      this.list=res.rows;
    })
  }
}
</script>

<style scoped lang="less">
.collectList{
  a {
    color: black;
  }
  .collect{
    height: 100px;
    //display: flex;
    //height: 101px;
    border-bottom: 1px solid #ccc;
    .collectPic{
      margin: 13px 10px;
      float: left;
      img {
        width: 130px;
        height: 70px;
      }
    }
   .content{
     float: right;
     width: 210px;
     p{
       overflow: hidden;
       text-overflow: ellipsis;
       word-break: break-all;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
       font-size: 14px;
     }
   }
  }
}
</style>